<template>
    <section id="monitor-mysql">
        <el-row>
        <el-col :span="24"  style="width: 100%;height: 40px;background-color: #B0C4DE;margin-bottom: 3px;border-radius: 8px;">
            <el-form :inline="true" :model="settingData" style="margin-left: 5px">
                <el-form-item label="主机" style="margin-left: 5px">
                    <i class="iconfont" style="color: orangered" >&#xe71a;</i>
                    <el-select  placeholder="请选择主机" v-model="settingData.ip" size="mini" style="width: 150px" @change="getMonitorMysqlData">
                        <el-option v-for="node in monitorMysqlNodes" :label="node" :value="node" ></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="interval">
                    <el-select  placeholder="请选择时间" v-model="settingData.durtion" size="mini" style="width: 110px">
                        <el-option label="last 15m" value="15"></el-option>
                        <el-option label="last 30m" value="30"></el-option>
                        <el-option label="last 1h" value="60"></el-option>
                        <el-option label="last 5h" value="300"></el-option>
                        <el-option label="last 10h" value="600"></el-option>
                        <el-option label="last 1d" value="1000"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

        </el-col>
        </el-row>



        <el-collapse  v-model="activeNames" @change="drawMysqlCharts">
            <el-collapse-item name="1">
                <template slot="title">
                    基础数值&nbsp;&nbsp;  <i class="header-icon el-icon-s-grid"></i>
                </template>
                <el-row :gutter="10">
                    <el-col :span="6"  >
                        <!--<div id="sysload-chartColumn" style=" width:90%;height:250px;"></div>-->
                        <div class="mysql-monitor-dark">
                            <div style="text-align: center;font-size: 10px;font-weight: bold">Mysql Uptime</div>
                            <p style="text-align: center;font-size: 20px;color: blue">{{monitorMysql.uptime}}</p>
                        </div>
                    </el-col>
                    <el-col :span="6"  >
                        <!--<div id="sysload-chartColumn" style=" width:90%;height:250px;"></div>-->
                        <div class="mysql-monitor-dark">
                            <div style="text-align: center;font-size: 10px;font-weight: bold">Current Ops</div>
                            <p style="text-align: center;font-size: 20px;color: blue">{{monitorMysql.currops}}</p>
                        </div>
                    </el-col>
                    <el-col :span="6"  >
                        <!--<div id="sysload-chartColumn" style=" width:90%;height:250px;"></div>-->
                        <div class="mysql-monitor-dark">
                            <div style="text-align: center;font-size: 10px;font-weight: bold">InnoDB Buffer Pool Size</div>
                            <p style="text-align: center;font-size: 20px;color: blue">{{monitorMysql.bufferpool}}</p>
                        </div>
                    </el-col>
                    <el-col :span="6"  >
                        <!--<div id="sysload-chartColumn" style=" width:90%;height:250px;"></div>-->
                        <div class="mysql-monitor-dark">
                            <div style="text-align: center;font-size: 10px;font-weight: bold">ISlow Querys</div>
                            <p style="text-align: center;font-size: 20px;color: blue">{{monitorMysql.slowquerys}}</p>
                        </div>
                    </el-col>

                </el-row>
            </el-collapse-item>
            <el-collapse-item title="Connections" name="2">
                <el-row :gutter="10">
                    <el-col :span="12"  >
                            <div style="text-align: center;background-color: #F5F5F5">Mysql Connections</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqlconnections" style="width:800px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>

                    <el-col :span="12"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql Client Thread Activity</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqlclientthreads" style="width:800px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>


                </el-row>
            </el-collapse-item>
            <el-collapse-item title="Table Locks">
                <el-row :gutter="10">
                    <el-col :span="12"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql Questions</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqlquestions" style="width:800px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>
                    <el-col :span="12"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql Thread Cache</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqlthreadcache" style="width:800px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>


                </el-row>
            </el-collapse-item>

            <el-collapse-item title="Aborted">
                <el-row :gutter="10">
                    <el-col :span="12"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql Aborted Connections</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqlabortconnections" style="width:800px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>
                    <el-col :span="12"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql Table Locks</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqltablelock" style="width:800px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>


                </el-row>
            </el-collapse-item>
            <el-collapse-item title="Network">
                <el-row :gutter="10">
                    <el-col :span="12"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql network Traffic</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqlnetworktraffic" style="width:800px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>
                    <el-col :span="12"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql Network Usage Hourly</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqlnetworktusagehourly" style="width:800px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>


                </el-row>
            </el-collapse-item>

            <el-collapse-item title="Memory">
                <el-row >
                    <el-col :span="24"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql internal memory overview</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqlinternalmemory" style="width:1650px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>

                </el-row>
            </el-collapse-item>
            <el-collapse-item title="Command Handlers Processes">
                <el-row >
                    <el-col :span="24"  >
                        <div style="text-align: center;background-color: #F5F5F5">Top5 Command Counters</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqltop5commands" style="width:1650px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>
                    <el-col :span="24"  >
                        <div style="text-align: center;background-color: #F5F5F5">Top5 Command Counters hourly</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqltop5commandshourly" style="width:1650px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>
                    <el-col :span="24"  >
                        <div style="text-align: center;background-color: #F5F5F5">Mysql Transaction Handlers</div>
                        <div class="mysql-monitor-dark-2" >
                            <div id="mysqltransactions" style="width:1650px !important; height:250px;" ></div>
                            <!--<div id="mysqlconnections" :style="getconnwidth" ></div>-->
                        </div>
                    </el-col>



                </el-row>
            </el-collapse-item>

        </el-collapse>

    </section>
</template>

<script>
    import echarts from 'echarts'
    import { monitorMysqlData,getMonitorMysqlNodes } from '../../api/api'


    export default {
        data() {
            return {
                activeNames:["1","2"],
                settingData: {
                    ip: "172.21.205.40",
                    durtion: "",
                },

                monitorMysqlNodes:[],

                //
                mysql_connections:null,
                mysql_clientthreads:null,
                mysql_questions:null,
                mysql_threadcache:null,

                mysql_abortconnections:null,
                mysql_tablelock:null,

                mysql_networktraffic:null,
                mysql_networkusageHourly:null,

                mysql_internalmemory:null,

                mysql_commandscounter:null,
                mysql_commandshourly:null,
                mysql_transactions:null,

                monitorMysql: {
                    uptime: null,
                    currops: null,
                    bufferpool: null,
                    slowquerys: null,

                    connectionsStatusValue: {
                        T: [

                        ],
                        X1:[

                        ],
                        X2:[

                        ],
                        X3:[

                        ],

                    },
                    clientThreadsStatusValue: {
                        T: [

                        ],
                        X1:[

                        ],
                        X2:[

                        ],
                        X3:[

                        ],

                    },
                    questionsStatusValue: {
                        T: [

                        ],
                        X1:[

                        ],

                    },
                    threadCacheStatusValue: {
                        T: [

                        ],
                        X1:[

                        ],
                        X2:[],
                        X3:[],

                    },
                    abortConnectionStatusValue: {
                        T: [

                        ],
                        X1:[

                        ],
                        X2:[],
                        X3:[],

                    },
                    tableLockStatusValue: {
                        T: [

                        ],
                        X1:[

                        ],
                        X2:[],


                    },
                    networkTrafficStatusValue: {
                        T: [],
                        X1:[],
                        X2:[],
                    },
                    networkUsageHourlyStatusValue: {
                        T: [],
                        X1:[],
                        X2:[],
                    },
                    internalMemoryStatusValue: {
                        T: [],
                        X1:[],
                        X2:[],
                        X3:[],
                    },
                    top5CommandsStatusValue: {
                        T: [],
                        Mertic:[],
                        X1:[],
                        X2:[],
                        X3:[],
                        X4:[],
                        X5:[],
                    },
                    top5CommandshourlyStatusValue: {
                        T: [],
                        Mertic:[],
                        X1:[],
                        X2:[],
                        X3:[],
                        X4:[],
                        X5:[],
                    },
                    transactionsStatusValue: {
                        T: [],
                        Mertic:[],
                        X1:[],
                        X2:[],
                        X3:[],
                        X4:[],
                        X5:[],
                    },
                },
            }
        },

        methods: {
            getMonitorMysqlData(){
                console.log("debug")
                let param = {ip:this.settingData.ip,durtion:"30"}
                monitorMysqlData(param).then((res) => {

                    this.monitorMysql.uptime = res.uptime
                    this.monitorMysql.currops = res.currops
                    this.monitorMysql.bufferpool = res.bufferpool
                    this.monitorMysql.slowquerys = res.slowquerys

                    this.monitorMysql.connectionsStatusValue = res.connectios
                    this.monitorMysql.clientThreadsStatusValue = res.clientthreads
                    this.monitorMysql.questionsStatusValue = res.questions
                    this.monitorMysql.threadCacheStatusValue = res.threadcache
                    this.monitorMysql.abortConnectionStatusValue = res.abortConnections
                    this.monitorMysql.tableLockStatusValue = res.tablelocks
                    this.monitorMysql.networkTrafficStatusValue = res.networktraffic
                    this.monitorMysql.networkUsageHourlyStatusValue = res.networkusagehourly
                    this.monitorMysql.internalMemoryStatusValue = res.internalmemory
                    this.monitorMysql.top5CommandsStatusValue = res.commands
                    this.monitorMysql.top5CommandshourlyStatusValue = res.commamdshourly
                    this.monitorMysql.transactionsStatusValue = res.transactions


                    }
                )
            },
            mysqlConnLineChart() {

                    this.mysql_connections = echarts.init(document.getElementById('mysqlconnections'));
                    this.mysql_connections.setOption({

                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['maxUsedConnections', 'connections' , 'maxConnections']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.monitorMysql.connectionsStatusValue.T
                        },
                        yAxis: {
                            type : 'value',
                        },
                        series: [
                            {
                                name: 'maxUsedConnections',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {
                                    normal : {
                                        color: '#F6C6CC',
                                    }
                                },
                                data: this.monitorMysql.connectionsStatusValue.X1
                            },
                            {
                                name: 'connections',
                                type: 'line',
                                stack: '总量',
                                itemStyle : {

                                },
                                areaStyle: {
                                    normal : {
                                        color: '#DCECD0',
                                    }
                                },
                                data: this.monitorMysql.connectionsStatusValue.X2
                            },
                            {
                                name: 'maxConnections',
                                type: 'line',
                                stack: '总量',
                                itemStyle : {

                                },
                                areaStyle: {
                                    normal : {
                                        color: '#DCECD0',
                                    }
                                },
                                data: this.monitorMysql.connectionsStatusValue.X3
                            },
                        ]
                    });


            },
            mysqlClientThreadsLineChart() {

                this.mysql_clientthreads = echarts.init(document.getElementById('mysqlclientthreads'));
                this.mysql_clientthreads.setOption({

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['Peak Threads Connected', 'Peak Threads Running' , 'Avg Threads Running']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorMysql.clientThreadsStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: 'Peak Threads Connected',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorMysql.clientThreadsStatusValue.X1
                        },
                        {
                            name: 'Peak Threads Running',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.clientThreadsStatusValue.X2
                        },
                        {
                            name: 'Avg Threads Running',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.clientThreadsStatusValue.X3
                        },
                    ]
                });


            },

            mysqlQuestionsLineChart() {

                this.mysql_questions = echarts.init(document.getElementById('mysqlquestions'));
                this.mysql_questions.setOption({

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['Questions']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorMysql.questionsStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: 'Questions',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorMysql.questionsStatusValue.X1
                        }
                    ]
                });


            },
            mysqlThreadCacheLineChart() {

                this.mysql_threadcache = echarts.init(document.getElementById('mysqlthreadcache'));
                this.mysql_threadcache.setOption({

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['Thread Cache Size', 'Threads Cached' , 'Threads Created']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorMysql.threadCacheStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: 'Thread Cache Size',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorMysql.threadCacheStatusValue.X1
                        },
                        {
                            name: 'Threads Cached',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.threadCacheStatusValue.X2
                        },
                        {
                            name: 'Threads Created',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.threadCacheStatusValue.X3
                        },
                    ]
                });


            },

            mysqlAbortConnectionsLineChart() {

                this.mysql_abortconnections = echarts.init(document.getElementById('mysqlabortconnections'));
                this.mysql_abortconnections.setOption({

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['Aborted Connects', 'Aborted Clients' , 'Tcp TimeWait']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorMysql.abortConnectionStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: 'Aborted Connects',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorMysql.abortConnectionStatusValue.X1
                        },
                        {
                            name: 'Aborted Clients',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.abortConnectionStatusValue.X2
                        },
                        {
                            name: 'Tcp TimeWait',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.abortConnectionStatusValue.X3
                        },
                    ]
                });


            },
            mysqlTableLockLineChart() {

                this.mysql_tablelock = echarts.init(document.getElementById('mysqltablelock'));
                this.mysql_tablelock.setOption({

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['Table Locks Immediate', 'Table Locks Waited']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorMysql.tableLockStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: 'Table Locks Immediate',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorMysql.tableLockStatusValue.X1
                        },
                        {
                            name: 'Table Locks Waited',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.tableLockStatusValue.X2
                        }
                    ]
                });


            },

            mysqlNetworkTrafficLineChart() {

                this.mysql_networktraffic = echarts.init(document.getElementById('mysqlnetworktraffic'));
                this.mysql_networktraffic.setOption({

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['Inbound', 'Outbound']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorMysql.networkTrafficStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: 'Inbound',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorMysql.networkTrafficStatusValue.X1
                        },
                        {
                            name: 'Outbound',
                            type: 'line',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.networkTrafficStatusValue.X2
                        }
                    ]
                });


            },
            mysqlNetworkUsageHourlyLineChart() {

                this.mysql_networkusageHourly = echarts.init(document.getElementById('mysqlnetworktusagehourly'));
                this.mysql_networkusageHourly.setOption({

                    tooltip: {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['Received', 'Sent']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',

                        data: this.monitorMysql.networkUsageHourlyStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: 'Received',
                            type: 'bar',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorMysql.networkUsageHourlyStatusValue.X1
                        },
                        {
                            name: 'Sent',
                            type: 'bar',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.networkUsageHourlyStatusValue.X2
                        }
                    ]
                });


            },

            mysqlInternalMemoryLineChart() {

                this.mysql_internalmemory = echarts.init(document.getElementById('mysqlinternalmemory'));
                this.mysql_internalmemory.setOption({

                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['InnoDB Log Buffer Size', 'Query Cache Size','InnoDB Buffer Pool Data']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monitorMysql.internalMemoryStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: 'InnoDB Log Buffer Size',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: this.monitorMysql.internalMemoryStatusValue.X1
                        },
                        {
                            name: 'Query Cache Size',
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.internalMemoryStatusValue.X2
                        },
                        {
                            name: 'InnoDB Buffer Pool Data',
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: this.monitorMysql.internalMemoryStatusValue.X3
                        }
                    ]
                });


            },

            mysqlTop5CommandsLineChart() {
                let self = this

                this.mysql_commandscounter = echarts.init(document.getElementById('mysqltop5commands'));
                this.mysql_commandscounter.setOption({

                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: self.monitorMysql.top5CommandsStatusValue.Mertic
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: self.monitorMysql.top5CommandsStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: self.monitorMysql.top5CommandsStatusValue.Mertic[0],
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: self.monitorMysql.top5CommandsStatusValue.X1
                        },
                        {
                            name: self.monitorMysql.top5CommandsStatusValue.Mertic[1],
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.top5CommandsStatusValue.X2
                        },
                        {
                            name: self.monitorMysql.top5CommandsStatusValue.Mertic[2],
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.top5CommandsStatusValue.X3
                        },
                        {
                            name: self.monitorMysql.top5CommandsStatusValue.Mertic[3],
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.top5CommandsStatusValue.X4
                        },
                        {
                            name: self.monitorMysql.top5CommandsStatusValue.Mertic[4],
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.top5CommandsStatusValue.X5
                        },
                    ]
                });


            },
            mysqlTop5CommandshourlyLineChart() {
                let self = this

                this.mysql_commandshourly = echarts.init(document.getElementById('mysqltop5commandshourly'));
                this.mysql_commandshourly.setOption({

                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: self.monitorMysql.top5CommandshourlyStatusValue.Mertic
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: self.monitorMysql.top5CommandshourlyStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: self.monitorMysql.top5CommandshourlyStatusValue.Mertic[0],
                            type: 'bar',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: self.monitorMysql.top5CommandshourlyStatusValue.X1
                        },
                        {
                            name: self.monitorMysql.top5CommandshourlyStatusValue.Mertic[1],
                            type: 'bar',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.top5CommandshourlyStatusValue.X2
                        },
                        {
                            name: self.monitorMysql.top5CommandshourlyStatusValue.Mertic[2],
                            type: 'bar',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.top5CommandshourlyStatusValue.X3
                        },
                        {
                            name: self.monitorMysql.top5CommandshourlyStatusValue.Mertic[3],
                            type: 'bar',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.top5CommandshourlyStatusValue.X4
                        },
                        {
                            name: self.monitorMysql.top5CommandshourlyStatusValue.Mertic[4],
                            type: 'bar',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.top5CommandshourlyStatusValue.X5
                        },
                    ]
                });


            },
            transactionshourlyLineChart() {
                let self = this

                this.mysql_transactions = echarts.init(document.getElementById('mysqltransactions'));
                this.mysql_transactions.setOption({

                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: self.monitorMysql.transactionsStatusValue.Mertic
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: self.monitorMysql.transactionsStatusValue.T
                    },
                    yAxis: {
                        type : 'value',
                    },
                    series: [
                        {
                            name: self.monitorMysql.transactionsStatusValue.Mertic[0],
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal : {
                                    color: '#F6C6CC',
                                }
                            },
                            data: self.monitorMysql.transactionsStatusValue.X1
                        },
                        {
                            name: self.monitorMysql.transactionsStatusValue.Mertic[1],
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.transactionsStatusValue.X2
                        },
                        {
                            name: self.monitorMysql.transactionsStatusValue.Mertic[2],
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.transactionsStatusValue.X3
                        },
                        {
                            name: self.monitorMysql.transactionsStatusValue.Mertic[3],
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.transactionsStatusValue.X4
                        },
                        {
                            name: self.monitorMysql.transactionsStatusValue.Mertic[4],
                            type: 'line',
                            barWidth: '60%',
                            stack: '总量',
                            itemStyle : {

                            },
                            areaStyle: {
                                normal : {
                                    color: '#DCECD0',
                                }
                            },
                            data: self.monitorMysql.transactionsStatusValue.X5
                        },
                    ]
                });


            },

            getAllMonitorMysqlNodes(host){
                let self = this
                getMonitorMysqlNodes().then((res) => {
                        // this.ipALL = res.data.iplists
                        self.monitorMysqlNodes =  res.data.nodes

                        if (host === null || host === undefined){

                            self.settingData.ip = res.data.nodes[0]
                        }else {
                            self.settingData.ip = host
                        }

                        this.$nextTick(function () {
                            this.getMonitorMysqlData()
                            // this.getMonitorAlertData()
                        })

                    }
                )
            },


            drawMysqlCharts() {
                this.mysqlConnLineChart()
                this.mysqlClientThreadsLineChart()
                this.mysqlQuestionsLineChart()
                this.mysqlThreadCacheLineChart()
                this.mysqlAbortConnectionsLineChart()
                this.mysqlTableLockLineChart()
                this.mysqlNetworkTrafficLineChart()
                this.mysqlNetworkUsageHourlyLineChart()
                this.mysqlInternalMemoryLineChart()
                this.mysqlTop5CommandsLineChart()
                this.mysqlTop5CommandshourlyLineChart()
                this.transactionshourlyLineChart()
            },

        },


        created: function() {
        },
        mounted: function () {

            this.getAllMonitorMysqlNodes(this.$route.query.host)

            // this.getMonitorMysqlData()
            this.drawMysqlCharts()

        },
        destroyed: function () {  //单组件页面
            // 每次离开当前界面时，清除定时器
            // clearInterval(this.monitertimer)
            // this.monitertimer = null
        },
        updated: function () {
            this.drawMysqlCharts()
        }
    }
</script>

<style >
    #monitor-mysql {
        width: 100%;
        float: left;
    }
    /*mysql style*/
    #monitor-mysql .mysql-monitor-dark {
        background-color: 		#F5F5F5;
        height: 150px;
    }
    #monitor-mysql .mysql-monitor-dark-2 {
        background-color: 		#F5F5F5;
        height: 250px;
        width: auto;

    }

    #monitor-mysql .el-collapse-item__header{
        background-color: #B0C4DE;
        height: 30px;
        border-radius: 8px;
        margin-bottom: 3px;
    }
    #monitor-mysql .el-collapse-item__content {
        padding-bottom: 5px;
    }


</style>
